<template>
  <div class="login">
    <!-- 头部标题 -->
    <van-nav-bar title="" left-arrow @click-left="$router.push('/home')" />
    <div class="main-box">
      <h2>您好，请登录</h2>
    </div>
    <van-form @submit="onSubmit">
      <!-- 手机号 & 验证码 -->
      <van-cell-group>
        <van-field
          :rules="rules.mobile"
          v-model="user.mobile"
          placeholder="请输入手机号"
        >
          <template #left-icon>
            <i class="iconfont iconbianzu1"></i>
          </template>
        </van-field>
        <van-field
          :rules="rules.code"
          v-model="user.code"
          placeholder="请输入验证码"
        >
          <!-- <template #button>
            <div class="codeBtn" @click="getCode">获取验证码</div>
          </template> -->
          <template #button>
            <div class="codeBtn">
              <span class="timeset" v-if="timeout > 0 && timeout < 60"
                >{{ timeout }}秒后重试</span
              >
              <span v-else @click="getCode">获取验证码</span>
            </div>
          </template>
          <template #left-icon>
            <i class="iconfont iconyanzhengma"></i>
          </template>
        </van-field>
        <div>
          <p class="deal">
            登录既同意<span>《用户使用协议》</span>和<span>《隐私协议》</span>
          </p>
        </div>
      </van-cell-group>
      <!-- 登录按钮 -->
      <div class="loginbtn">
        <van-button type="danger" block round>确定</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import { setLocal } from '@/utils/local.js'
import { getCodeApi, login } from '@/api/login.js'
export default {
  data () {
    return {
      timeout: 60,
      // 用户信息
      user: {
        mobile: '18888881111',
        code: ''
      },
      // 验证规则
      rules: {
        mobile: [
          //  验证是否为空
          { required: true, message: '请输入手机号', trigger: 'onBlur' },
          // 验证是否匹配正则
          {
            pattern: /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/,
            message: '请输入正确的手机号',
            trigger: 'onBlur'
          }
        ],
        code: [
          { required: true, message: '', trigger: 'onBlur' },
          { pattern: /^\d{4}$/, message: '', trigger: 'onBlur' }
        ]
      },
      // 设置登录按钮的加载状态
      isLoading: false
    }
  },
  methods: {
    // 获取验证码
    async getCode () {
      // 提示用户
      this.$toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: '加载中'
      })
      this.timeout--
      const interTime = setInterval(() => {
        this.timeout--
        if (this.timeout === 0) {
          this.timeout = 60
          clearInterval(interTime)
        }
      }, 1000)
      // console.log(this.$route.path)
      // try {
      const res = await getCodeApi(this.user.mobile)
      this.user.code = res.data
      console.log(res)
      this.$toast.success(res.data)
      // let second = 3
      // const timer = setInterval(() => {
      //   second--
      //   if (!second) {
      //     clearInterval(timer)
      //     // 手动清除 Toast
      //     this.$toast.success(res.data)
      //   }
      // }, 1000)

      //   点击验证码设置倒计时
      // } catch {
      // this.$toast.fail('请输入手机号')
      // }
    },
    // 登录
    async onSubmit () {
      this.$toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: '加载中'
      })
      const res = await login(this.user)
      console.log(res)
      // 保存token到本地
      setLocal(res.data.jwt)
      // 将用户信息保存到vuex中
      this.$store.state.userInfo = res.data.user
      // 提示用户登录成功
      this.$toast.success('登录成功')
      // 跳转到首页
      if (this.$route.path === '/login') {
        this.$router.push('/home')
      } else {
        this.$router.back()
      }
    }
  }
}
</script>

<style lang="less" scoped>
.timeset {
  color: grey;
}
/deep/.van-icon-arrow-left {
  color: #000;
}
/deep/.codeBtn {
  color: #00b8d4;
  font-size: 16px;
}
.deal {
  padding: 15px;
  font-size: 12px;
  span {
    color: #00b8d4;
  }
}
.main-box {
  height: 150px;
  line-height: 90px;
  padding: 15px;
  h2 {
    font-size: 18px;
  }
}
.van-nav-bar__left {
  padding: 0px;
  .iconbtn_nav_back {
    font-size: 40px;
  }
}
.login {
  .codeBtn {
    /deep/ .van-button__text {
      color: #00b8d4;
    }
  }
  .loginbtn {
    margin: 20px;
  }
}
</style>
